<template>
  <div class="teacher-home">
    <!-- 个人信息展示区 -->
    <el-card class="personal-info-card" shadow="hover">
      <div class="personal-info">
        <div class="avatar-container">
          <el-avatar :size="80" :src="userInfo.avatar" :alt="userInfo.name">
            {{ userInfo.name.charAt(0) }}
          </el-avatar>
          <div class="user-info">
            <h2>{{ userInfo.name }}</h2>
            <p class="title">{{ userInfo.title }} · {{ userInfo.department }}</p>
            <div class="contact-info">
              <span><i class="el-icon-phone"></i> {{ userInfo.phone }}</span>
              <span><i class="el-icon-message"></i> {{ userInfo.email }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 统计卡片区 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon class-icon">
              <i class="el-icon-school"></i>
            </div>
            <div class="stat-info">
              <h3>我的班级</h3>
              <p>{{ classInfo }}</p>
              <span class="stat-desc">管理班级</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon students-icon">
              <i class="el-icon-user"></i>
            </div>
            <div class="stat-info">
              <h3>学生人数</h3>
              <p>{{ studentCount }}</p>
              <span class="stat-desc">名学生</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon projects-icon">
              <i class="el-icon-trophy"></i>
            </div>
            <div class="stat-info">
              <h3>负责项目</h3>
              <p>{{ responsibleProjects }}</p>
              <span class="stat-desc">个项目</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon pending-icon">
              <i class="el-icon-warning"></i>
            </div>
            <div class="stat-info">
              <h3>待处理</h3>
              <p>{{ pendingTasks }}</p>
              <span class="stat-desc">项任务</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 主要内容区 -->
    <el-row :gutter="20" class="main-content">
      <!-- 负责项目列表 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="content-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <h3>负责项目</h3>
              <el-button type="text" @click="viewAllProjects">查看全部</el-button>
            </div>
          </template>
          <div class="project-list" v-loading="projectsLoading">
            <div
              v-for="project in projects"
              :key="project.id"
              class="project-item"
              @click="viewProjectDetail(project)">
              <div class="project-info">
                <h4>{{ project.name }}</h4>
                <div class="project-meta">
                  <el-tag size="mini" :type="getProjectTypeTag(project.type)">
                    {{ project.type }}
                  </el-tag>
                  <span class="time">{{ formatTime(project.time) }}</span>
                  <span class="location">{{ project.location }}</span>
                </div>
              </div>
              <div class="project-actions">
                <el-button type="primary" size="mini" @click.stop="enterScore(project)">
                  录入成绩
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 近期活动 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="content-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <h3>近期活动</h3>
              <el-button type="text" @click="refreshActivities">刷新</el-button>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in recentActivities"
              :key="index"
              :timestamp="activity.time"
              :type="getActivityType(activity.type)"
              :icon="getActivityIcon(activity.type)">
              <div class="activity-content">
                <h4>{{ activity.title }}</h4>
                <p>{{ activity.content }}</p>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>

    <!-- 成绩录入快速入口 -->
    <el-row :gutter="20" class="quick-actions-row">
      <el-col :span="24">
        <el-card class="content-card quick-actions-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <h3>快捷操作</h3>
            </div>
          </template>
          <div class="quick-actions">
            <div class="action-item" @click="enrollmentManagement">
              <div class="action-icon enrollment-icon">
                <i class="el-icon-document-checked"></i>
              </div>
              <h4>报名管理</h4>
              <p>管理学生报名信息</p>
            </div>
            <div class="action-item" @click="scoreManagement">
              <div class="action-icon score-icon">
                <i class="el-icon-edit"></i>
              </div>
              <h4>成绩录入</h4>
              <p>录入比赛成绩</p>
            </div>
            <div class="action-item" @click="studentManagement">
              <div class="action-icon student-icon">
                <i class="el-icon-user-solid"></i>
              </div>
              <h4>学生管理</h4>
              <p>管理学生信息</p>
            </div>
            <div class="action-item" @click="scheduleView">
              <div class="action-icon schedule-icon">
                <i class="el-icon-date"></i>
              </div>
              <h4>赛程查看</h4>
              <p>查看比赛赛程</p>
            </div>
            <div class="action-item" @click="dataAnalysis">
              <div class="action-icon analysis-icon">
                <i class="el-icon-data-line"></i>
              </div>
              <h4>数据分析</h4>
              <p>查看统计分析</p>
            </div>
            <div class="action-item" @click="exportReport">
              <div class="action-icon export-icon">
                <i class="el-icon-download"></i>
              </div>
              <h4>导出报表</h4>
              <p>导出各类报表</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  name: 'TeacherHome',
  setup() {
    const router = useRouter()

    // 用户信息
    const userInfo = reactive({
      name: '张老师',
      title: '体育教师',
      department: '体育教研组',
      phone: '138****5678',
      email: 'zhang@school.edu.cn',
      avatar: ''
    })

    // 统计数据
    const classInfo = ref('高三一班')
    const studentCount = ref(45)
    const responsibleProjects = ref(5)
    const pendingTasks = ref(3)

    // 负责项目列表
    const projects = ref([
      {
        id: 1,
        name: '男子100米预赛',
        type: '田径',
        time: '2025-10-15 09:00',
        location: '田径场1道',
        status: 'pending'
      },
      {
        id: 2,
        name: '女子跳远决赛',
        type: '田径',
        time: '2025-10-15 14:00',
        location: '沙坑A',
        status: 'pending'
      },
      {
        id: 3,
        name: '男子4×100米接力',
        type: '田径',
        time: '2025-10-16 10:00',
        location: '田径场2-5道',
        status: 'pending'
      }
    ])

    const projectsLoading = ref(false)

    // 近期活动
    const recentActivities = ref([
      {
        title: '运动会报名开始',
        content: '请及时组织学生报名',
        time: '2025-10-12 10:00',
        type: 'info'
      },
      {
        title: '完成学生信息确认',
        content: '已确认所有参赛学生信息',
        time: '2025-10-11 15:30',
        type: 'success'
      },
      {
        title: '参加教师会议',
        content: '讨论运动会组织安排',
        time: '2025-10-10 09:15',
        type: 'warning'
      }
    ])

    // 方法
    const formatTime = (timeStr) => {
      const date = new Date(timeStr)
      return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
    }

    const getProjectTypeTag = (type) => {
      const typeMap = {
        '田径': 'success',
        '球类': 'primary',
        '游泳': 'warning',
        '体操': 'danger'
      }
      return typeMap[type] || 'info'
    }

    const getActivityType = (type) => {
      const typeMap = {
        'info': 'primary',
        'success': 'success',
        'warning': 'warning',
        'error': 'danger'
      }
      return typeMap[type] || 'primary'
    }

    const getActivityIcon = (type) => {
      const iconMap = {
        'info': 'el-icon-info',
        'success': 'el-icon-success',
        'warning': 'el-icon-warning',
        'error': 'el-icon-error'
      }
      return iconMap[type] || 'el-icon-info'
    }

    // 路由跳转方法
    const enrollmentManagement = () => {
      router.push('/enrollment')
    }

    const scoreManagement = () => {
      router.push('/score')
    }

    const studentManagement = () => {
      router.push('/student')
    }

    const scheduleView = () => {
      router.push('/schedule')
    }

    const dataAnalysis = () => {
      router.push('/analysis')
      ElMessage.info('数据分析功能开发中...')
    }

    const exportReport = () => {
      ElMessage.success('报表导出功能开发中...')
    }

    // 项目相关方法
    const viewAllProjects = () => {
      router.push('/projects')
    }

    const viewProjectDetail = (project) => {
      router.push(`/project/${project.id}`)
    }

    const enterScore = (project) => {
      router.push(`/score-entry?projectId=${project.id}`)
    }

    const refreshActivities = async () => {
      ElMessage.success('活动列表已刷新')
    }

    // 生命周期
    onMounted(() => {
      // 初始化数据加载
      // 教师首页初始化完成
    })

    return {
      userInfo,
      classInfo,
      studentCount,
      responsibleProjects,
      pendingTasks,
      projects,
      projectsLoading,
      recentActivities,
      formatTime,
      getProjectTypeTag,
      getActivityType,
      getActivityIcon,
      enrollmentManagement,
      scoreManagement,
      studentManagement,
      scheduleView,
      dataAnalysis,
      exportReport,
      viewAllProjects,
      viewProjectDetail,
      enterScore,
      refreshActivities
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.teacher-home {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

/* 个人信息卡片 */
.personal-info-card {
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
}

.personal-info {
  padding: 10px;
}

.avatar-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-info h2 {
  margin: 0 0 5px 0;
  color: #303133;
  font-size: 24px;
}

.user-info .title {
  margin: 0 0 10px 0;
  color: #606266;
  font-size: 16px;
}

.contact-info {
  display: flex;
  gap: 20px;
  color: #909399;
  font-size: 14px;
}

.contact-info span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 统计卡片 */
.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  flex-shrink: 0;
}

.class-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.students-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.projects-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.pending-icon {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stat-info h3 {
  margin: 0 0 5px 0;
  color: #606266;
  font-size: 14px;
  font-weight: normal;
}

.stat-info p {
  margin: 0 0 5px 0;
  color: #303133;
  font-size: 28px;
  font-weight: bold;
}

.stat-info .stat-desc {
  color: #909399;
  font-size: 12px;
}

/* 内容卡片 */
.content-card {
  border-radius: 12px;
  height: 100%;
  margin-bottom: 20px;
}

.main-content {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
}

/* 项目列表 */
.project-list {
  max-height: 400px;
  overflow-y: auto;
}

.project-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.project-item:hover {
  background-color: #f8f9fa;
}

.project-item:last-child {
  border-bottom: none;
}

.project-info h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 16px;
}

.project-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #909399;
  font-size: 13px;
}

.project-actions {
  flex-shrink: 0;
}

/* 活动时间线 */
.activity-content h4 {
  margin: 0 0 5px 0;
  color: #303133;
  font-size: 14px;
}

.activity-content p {
  margin: 0;
  color: #606266;
  font-size: 13px;
}

/* 快捷操作 */
.quick-actions-card {
  margin-bottom: 20px;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  padding: 10px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #f8f9fa;
}

.action-item:hover {
  background-color: #e9ecef;
  transform: translateY(-3px);
}

.action-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  margin-bottom: 15px;
}

.enrollment-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.score-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.student-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.schedule-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.analysis-icon {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.export-icon {
  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

.action-item h4 {
  margin: 0 0 5px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 500;
}

.action-item p {
  margin: 0;
  color: #606266;
  font-size: 13px;
  text-align: center;
}


/* 滚动条样式 */
.project-list::-webkit-scrollbar {
  width: 6px;
}

.project-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.project-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.project-list::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
</style>